<template>
	{{message}}<br>
	<input type="text" v-model="todoData"/> <button @click="add">添加事项</button>

  <br>
	<button @click="zt='all'">显示全部</button>
	<button @click="zt='ok'">显示已完成</button>
	<button @click="zt='no'">显示未完成</button>
  <br>

  <ul>
    <li v-for="(item,$index) in fdata1" :key="$index">
       <p :class="item.isok?'del':''">{{item.text}} <input type="checkbox"  v-model="item.isok">
      <button @click="del($index)">删除</button></p>
    </li>
  </ul>

  已完成{{ok()}} <br>
  已完成{{no()}} <br>


</template>

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import {computed, ref} from "vue";

let message = ref("待办事项")
let zt = ref("all")
let todoData = ref('')
let data1 = ref([
    {text:'小黑',
      isok:false},
    {text:'小白',
    isok:false},
    {text:'小三',
    isok:false}
    ])

const add =()=>{
  data1.value.push({text:todoData.value,isok:false})
}



let fdata1 = computed(()=>{
    let fdata = data1.value.filter(item=>{
      if (zt.value === "ok"){
        return item.isok;
      }else if (zt.value === "no"){
        return !item.isok;
      }else if(zt.value === "all" ){
        return item
      }

    })
    return fdata;

})
let ok = ()=>{
  return data1.value.filter(item=> item.isok).length
}

let no = ()=>{
  return data1.value.filter(item=> !item.isok).length
}

const del = (id)=>{
  data1.value.splice(id,1)
}


</script>



<style scoped>

.del{
  text-decoration: line-through;
}


</style>
